<script setup lang="ts">
import { computed, defineComponent, nextTick, ref } from 'vue';

import { CheckOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import { doudianStore, in1688ToDoudianStore } from '#/store/modules';

import AiTitle from '../../aiTitle.vue';
import { getStrLen } from '../../tools';

const doudianStoreModel = doudianStore();

const in1688ToDoudian = in1688ToDoudianStore();
const DoudianCategoryList = computed(
  () => doudianStoreModel.DoudianCategoryList,
);

const formState: any = defineModel();

const recommendNameRule = computed(
  () => formState.value.rule?.recommendNameRule,
);

const formRef = ref();
const rules = {
  goodsTitle: [
    {
      required: true,
      async validator(rule: any, value: string) {
        if (
          getStrLen(value) <
            recommendNameRule?.value.titleLimitRule?.minLength ||
          getStrLen(value) > recommendNameRule?.value.titleLimitRule.maxLength
        ) {
          throw new Error(rule.message);
        }
        return true;
      },
      message: `请输入${recommendNameRule?.value.titleLimitRule?.minLength}-${recommendNameRule?.value.titleLimitRule?.maxLength}个字符`,
    },
  ],
  shortProductName: [
    {
      async validator(rule: any, value: string) {
        if (!value) return true;
        if (getStrLen(value) < 8 || getStrLen(value) > 24) {
          throw new Error(rule.message);
        }
        return true;
      },
      message: '请输入8(4个汉字)-24(12个汉字)个字符',
    },
  ],
};
const zhongyao = computed(() =>
  formState.value.propertyList?.filter((item: any) => item.importantType === 1),
);
const qita = computed(() =>
  formState.value.propertyList?.filter((item: any) => item.importantType === 0),
);

const filterOption = (input: string, option: any) => {
  return option.name.toLowerCase().includes(input.toLowerCase());
};
const fieldNames = {
  label: 'name',
  value: 'value',
};
const fieldNamesCate = {
  label: 'name',
  value: 'id',
  children: 'children',
};
const fieldNamesmeasure = {
  label: 'unitName',
  value: 'unitId',
};
const fieldNamesmulti = {
  label: 'valueName',
  value: 'valueName',
};
function dropChange(status: boolean) {
  if (!status) {
    const outerId =
      formState.value.categoryIdsOps[formState.value.categoryIdsOps.length - 1];
    // eslint-disable-next-line unicorn/prefer-number-properties
    if (isNaN(outerId)) return;
    if (formState.value.categoryId !== outerId) {
      formState.value.categoryId = outerId;

      in1688ToDoudian.getItemDetail(formState.value.offerId);
    }
  }
}

const inputRef = ref();
const name = ref();

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  },
});
const loding = ref(true);
nextTick(() => {
  loding.value = false;
});
const aiTitleBoxState = ref(false);
const getTitleLodinStatus = ref(false);
const selectImage = ref();

function getAiTitle() {
  aiTitleBoxState.value = true;

  selectImage.value = formState.value.mainPicList[0];
}
function getSelectAiTitle(title: string) {
  if (!title) {
    return message.error('请选择标题！！！');
  }
  aiTitleBoxState.value = false;
  formState.value.goodsTitle = title;
  message.success('标题已替换');
}
</script>

<template>
  <a-spin
    :spinning="loding"
    class="mx-auto my-auto h-full w-full"
    size="large"
  />
  <div v-if="!loding && formState">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      layout="vertical"
      name="basic"
    >
      <a-form-item
        :extra="
          formState.on1688Category
            ? `1688类目: ${formState.on1688Category}`
            : null
        "
        :help="
          formState.categoryIds && formState.categoryIds.length > 0
            ? ''
            : '请填写选择类目'
        "
        :validate-status="
          formState.categoryIds && formState.categoryIds.length > 0
            ? 'success'
            : 'error'
        "
        label="商品类目"
      >
        <a-cascader
          v-model:value="formState.categoryIdsOps"
          :field-names="fieldNamesCate"
          :load-data="doudianStoreModel.loadData"
          :options="DoudianCategoryList"
          change-on-select
          placeholder="请选择类目"
          @dropdown-visible-change="dropChange"
        >
          <template #displayRender="{ labels }">
            <span v-for="(label, index) in labels" :key="index">
              {{ label }}
              <span v-if="index + 1 < labels.length"> > </span>
            </span>
            <span v-if="labels.length === 0">请选择类目</span>
          </template>
        </a-cascader>
      </a-form-item>

      <a-form-item name="goodsTitle">
        <template #label>
          <a-space align="center" style="width: 100%">
            <div>商品标题</div>
            <a-button
              :loading="getTitleLodinStatus"
              type="primary"
              @click="getAiTitle"
            >
              AI标题
            </a-button>
          </a-space>
        </template>
        <a-input
          v-model:value="formState.goodsTitle"
          :placeholder="`请输入${recommendNameRule?.titleLimitRule?.minLength}-${recommendNameRule?.titleLimitRule?.maxLength}个字符`"
        >
          <template #suffix>
            <span>
              {{ getStrLen(formState.goodsTitle || '') }}/
              {{ recommendNameRule?.titleLimitRule?.maxLength }}
            </span>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="导购短标题" name="shortProductName">
        <a-input
          v-model:value="formState.shortProductName"
          placeholder="建议填写简明准确的标题内容，避免重复表达"
        >
          <template #suffix>
            <span>{{ getStrLen(formState.shortProductName || '') }}/24</span>
          </template>
        </a-input>
      </a-form-item>
      <a-space align="start" class="w-full">
        <div class="scrollbar" style="width: 300px">
          <div>来源属性：</div>
          <div>
            <div
              v-for="(item, index) in formState.attributesList"
              :key="index"
              class="flex items-start"
            >
              <div class="mr-2 text-right" style="width: 25%">
                {{ item.propertyName }}:
              </div>
              <div style="width: 75%">{{ item.valueName }}</div>
            </div>
          </div>
        </div>
        <a-space class="w-full" direction="vertical">
          <span>重要属性 </span>
          <!-- 1/{{ zhongyao?.length }} -->
          <a-space class="w-full" wrap>
            <template v-for="item in zhongyao" :key="item.propertyId">
              <a-form-item
                v-if="
                  (item.propertyId !== 785 && item.propertyId !== 3127) ||
                  item.type !== 'multi_value_measure'
                "
                :label="item.propertyName"
                :rules="[
                  { required: !!item.required, message: `该项为必填，请输入` },
                ]"
                class="w-48"
              >
                <a-select
                  v-if="item.type === 'select'"
                  v-model:value="item.optionsValue"
                  :allow-clear="!item.required"
                  :field-names="fieldNames"
                  :filter-option="filterOption"
                  :options="item.options"
                  :placeholder="`请选择${item.propertyName}`"
                  show-search
                >
                  <template
                    v-if="item.diyType === 1"
                    #dropdownRender="{ menuNode: menu }"
                  >
                    <VNodes :vnodes="menu" />
                    <a-divider style="margin: 4px 0" />
                    <a-space style="padding: 4px 8px">
                      <a-input
                        ref="inputRef"
                        v-model:value="name"
                        placeholder="请输入属性值"
                        size="small"
                      />
                      <a-button
                        type="link"
                        @click="
                          (e: any) => {
                            e.preventDefault();

                            if (name.trim() === '') {
                              message.error('请输入属性值');
                              return;
                            }
                            const getLetieDtata = item.options.find(
                              (i: any) => i.name === name.trim(),
                            );
                            if (getLetieDtata) {
                              item.optionsValue = getLetieDtata.value;
                            } else {
                              item.options.push({
                                diyType: 1, // 自定义
                                value: name.trim(),
                                name: name.trim(),
                                valueId: 0,
                              });
                              item.optionsValue = name.trim();
                            }
                            name = '';
                          }
                        "
                      >
                        <template #icon>
                          <CheckOutlined />
                        </template>
                      </a-button>
                    </a-space>
                  </template>
                </a-select>
                <a-select
                  v-if="item.type === 'multi_select'"
                  v-model:value="item.optionsValue"
                  :allow-clear="!item.required"
                  :field-names="fieldNames"
                  :filter-option="filterOption"
                  :options="
                    // item.options
                    (() => {
                      const copyData = JSON.parse(JSON.stringify(item.options));
                      copyData.forEach((itemee: any) => {
                        if (item.optionsValue.length >= item.multiSelectMax) {
                          if (!item.optionsValue.includes(itemee.value)) {
                            itemee.disabled = true;
                          } else {
                            itemee.disabled = false;
                          }
                        } else {
                          itemee.disabled = false;
                        }
                      });

                      // item.disabled = true

                      return copyData;
                    })()
                  "
                  :placeholder="`请选择${item.propertyName},最多${item.multiSelectMax}项`"
                  mode="multiple"
                  show-search
                >
                  <template
                    v-if="item.diyType === 1"
                    #dropdownRender="{ menuNode: menu }"
                  >
                    <VNodes :vnodes="menu" />
                    <a-divider style="margin: 4px 0" />
                    <a-space style="padding: 4px 8px">
                      <a-input
                        ref="inputRef"
                        v-model:value="name"
                        placeholder="请输入属性值"
                        size="small"
                      />
                      <a-button
                        type="link"
                        @click="
                          (e: any) => {
                            e.preventDefault();
                            if (name.trim() === '') {
                              message.error('请输入属性值');
                              return;
                            }
                            const getFindDatas = item.options.find(
                              (i: any) => i.name === name.trim(),
                            );
                            if (getFindDatas) {
                              if (
                                item.optionsValue.length < item.multiSelectMax
                              ) {
                                !item.optionsValue.includes(
                                  getFindDatas.value,
                                ) && item.optionsValue.push(getFindDatas.value);
                              } else {
                                message.error(
                                  `最多选择${item.multiSelectMax}项`,
                                );
                              }
                            } else {
                              item.options.push({
                                diyType: 1, // 自定义
                                value: name.trim(),
                                name: name.trim(),
                                valueId: 0,
                              });
                              if (
                                item.optionsValue.length < item.multiSelectMax
                              ) {
                                !item.optionsValue.includes(name.trim()) &&
                                  item.optionsValue.push(name.trim());
                              } else {
                                message.error(
                                  `最多选择${item.multiSelectMax}项`,
                                );
                              }
                            }
                            name = '';
                          }
                        "
                      >
                        <template #icon>
                          <CheckOutlined />
                        </template>
                      </a-button>
                    </a-space>
                  </template>
                </a-select>
                <a-input
                  v-if="item.type === 'text'"
                  v-model:value="item.optionsValue"
                  :allow-clear="!item.required"
                  :placeholder="`请输入${item.propertyName}`"
                />
                <div v-if="item.type === 'measure'">
                  <div
                    v-for="(measure, indexser) in item.measureTemplates"
                    :key="indexser"
                  >
                    <template v-if="measure.valueModules.length === 1">
                      <a-input-group
                        v-for="(meacobte, iter) in measure.valueModules"
                        :key="iter"
                        :allow-clear="!item.required"
                        class="w-full"
                        compact
                      >
                        <a-input
                          v-if="meacobte.inputType === 'input'"
                          v-model:value="meacobte.value"
                          :placeholder="`请输入${item.propertyName}`"
                          style="width: 60%"
                          @change="
                            () => {
                              let mergeValue = '';
                              measure.valueModules.forEach((uters: any) => {
                                const getunitName = uters.units.find(
                                  (unit: any) => unit.unitId === uters.unitId,
                                )?.unitName;
                                mergeValue += `${uters.value}${getunitName || ''}${uters.suffix}`;
                              });

                              item.optionsValue = mergeValue;
                            }
                          "
                        />
                        <a-select
                          v-model:value="meacobte.unitId"
                          :field-names="fieldNamesmeasure"
                          :options="meacobte.units"
                          style="width: 40%"
                          @change="
                            () => {
                              let mergeValue = '';
                              measure.valueModules.forEach((uters: any) => {
                                const getunitName = uters.units.find(
                                  (unit: any) => unit.unitId === uters.unitId,
                                ).unitName;
                                mergeValue += `${uters.value}${getunitName}${uters.suffix}`;
                              });

                              item.optionsValue = mergeValue;
                            }
                          "
                        />
                      </a-input-group>
                    </template>
                    <template v-if="measure.valueModules.length > 1">
                      <a-popover :open="item.openStatus" trigger="click">
                        <template #content>
                          <a-space align="end" direction="vertical">
                            <a-space>
                              <template
                                v-for="meacobte in measure.valueModules"
                                :key="meacobte.moduleId"
                              >
                                <span v-if="meacobte.prefix">{{
                                  meacobte.prefix
                                }}</span>
                                <a-input-group class="w-full" compact>
                                  <a-input
                                    v-if="meacobte.inputType === 'input'"
                                    v-model:value="meacobte.value"
                                    :placeholder="`请输入${item.propertyName}`"
                                    style="width: 60%"
                                  />
                                  <a-select
                                    v-if="
                                      meacobte.units &&
                                      meacobte.units.length > 0
                                    "
                                    v-model:value="meacobte.unitId"
                                    :field-names="fieldNamesmeasure"
                                    :options="meacobte.units"
                                    style="width: 40%"
                                  />
                                </a-input-group>
                                <span v-if="meacobte.suffix">{{
                                  meacobte.suffix
                                }}</span>
                              </template>
                            </a-space>
                            <a-space>
                              <a-button
                                @click="
                                  () => {
                                    item.openStatus = false;
                                  }
                                "
                              >
                                取消
                              </a-button>
                              <a-button
                                type="primary"
                                @click="
                                  () => {
                                    // console.log(
                                    //   '123456789',
                                    //   measure.valueModules,
                                    // );
                                    let mergeValue = '';
                                    measure.valueModules.forEach(
                                      (uters: any) => {
                                        const getunitName = uters.units.find(
                                          (unit: any) =>
                                            unit.unitId === uters.unitId,
                                        ).unitName;
                                        mergeValue += `${uters.value}${getunitName}${uters.suffix}`;
                                      },
                                    );
                                    console.log(mergeValue);
                                    item.optionsValue = mergeValue;
                                    item.openStatus = false;
                                  }
                                "
                              >
                                确认
                              </a-button>
                            </a-space>
                          </a-space>
                        </template>
                        <a-input
                          v-model:value="item.optionsValue"
                          placeholder="请输入"
                          @click="
                            () => {
                              zhongyao.forEach((zhongyao: any) => {
                                if (zhongyao.type === 'measure') {
                                  item.openStatus = false;
                                }
                              });
                              item.openStatus = true;
                            }
                          "
                        />
                      </a-popover>
                    </template>
                  </div>
                </div>
                <a-range-picker
                  v-if="item.type === 'date_time_range'"
                  v-model:value="item.optionsValue"
                  :format="
                    item.measureTemplates[0].valueModules[0].validateRule
                      .timeFormat
                  "
                  :placeholder="['开始时间', '结束时间']"
                />
              </a-form-item>
            </template>
          </a-space>
          <a-space class="w-full" wrap>
            <template v-for="item in zhongyao" :key="item.propertyId">
              <a-form-item
                v-if="
                  (item.propertyId === 785 || item.propertyId === 3127) &&
                  item.type === 'multi_value_measure'
                "
                :class="
                  item.propertyId === 785 || item.propertyId === 3127
                    ? 'w-full'
                    : 'w-48'
                "
                :label="item.propertyName"
                :rules="[
                  { required: !!item.required, message: `该项为必填，请输入` },
                ]"
              >
                <div v-if="item.type === 'multi_value_measure'">
                  <a-space direction="vertical">
                    <a-space wrap>
                      <a-space
                        v-for="(tab, indexqer) in item.optionsValue"
                        :key="indexqer"
                        :size="1"
                      >
                        <a-input-group compact style="width: 200px">
                          <a-select
                            v-model:value="tab.valueId"
                            :field-names="fieldNamesmulti"
                            :options="
                              item.measureTemplates[0].valueModules[0].values
                            "
                            placeholder="请选择"
                            style="width: 100px"
                          />
                          <a-input
                            v-model:value="tab.value"
                            :suffix="
                              item.measureTemplates[0].valueModules[1].units[0]
                                .unitName
                            "
                            placeholder="请输入"
                            style="width: 100px"
                          />
                        </a-input-group>
                        <DeleteOutlined
                          class="cursor-pointer"
                          @click="() => item.optionsValue.splice(indexqer, 1)"
                        />
                      </a-space>
                    </a-space>

                    <a-button
                      class="mt-2"
                      type="primary"
                      @click="
                        () => {
                          item.optionsValue.push({
                            value: '',
                            valueId: '',
                          });
                        }
                      "
                    >
                      添加材质
                    </a-button>
                  </a-space>
                </div>
              </a-form-item>
            </template>
          </a-space>
          <span v-if="qita?.length">其他属性</span>
          <!-- 1/ {{ qita?.length }} -->
          <a-space class="w-full" wrap>
            <a-form-item
              v-for="item in qita"
              :key="item.propertyId"
              :label="item.propertyName"
              :rules="[
                { required: !!item.required, message: `该项为必填，请输入` },
              ]"
              class="w-48"
            >
              <a-select
                v-if="item.type === 'select'"
                v-model:value="item.optionsValue"
                :allow-clear="!item.required"
                :field-names="fieldNames"
                :filter-option="filterOption"
                :options="item.options"
                :placeholder="`请选择${item.propertyName}`"
                show-search
              >
                <template
                  v-if="item.diyType === 1"
                  #dropdownRender="{ menuNode: menu }"
                >
                  <VNodes :vnodes="menu" />
                  <a-divider style="margin: 4px 0" />
                  <a-space style="padding: 4px 8px">
                    <a-input
                      ref="inputRef"
                      v-model:value="name"
                      placeholder="请输入属性值"
                      size="small"
                    />
                    <a-button
                      type="link"
                      @click="
                        (e: any) => {
                          e.preventDefault();

                          if (name.trim() === '') {
                            message.error('请输入属性值');
                            return;
                          }
                          const getLetieDtata = item.options.find(
                            (i: any) => i.name === name.trim(),
                          );
                          if (getLetieDtata) {
                            item.optionsValue = getLetieDtata.value;
                          } else {
                            item.options.push({
                              diyType: 1, // 自定义
                              value: name.trim(),
                              name: name.trim(),
                              valueId: 0,
                            });
                            item.optionsValue = name.trim();
                          }
                          name = '';
                        }
                      "
                    >
                      <template #icon>
                        <CheckOutlined />
                      </template>
                    </a-button>
                  </a-space>
                </template>
              </a-select>
              <a-select
                v-if="item.type === 'multi_select'"
                v-model:value="item.optionsValue"
                :allow-clear="!item.required"
                :field-names="fieldNames"
                :filter-option="filterOption"
                :options="
                  // item.options
                  (() => {
                    item.options.forEach((itemee: any) => {
                      if (item.optionsValue.length >= item.multiSelectMax) {
                        if (!item.optionsValue.includes(itemee.value)) {
                          itemee.disabled = true;
                        } else {
                          itemee.disabled = false;
                        }
                      } else {
                        itemee.disabled = false;
                      }
                    });

                    // item.disabled = true
                    return item.options;
                  })()
                "
                :placeholder="`请选择${item.propertyName},最多${item.multiSelectMax}项`"
                mode="multiple"
                show-search
              >
                <template
                  v-if="item.diyType === 1"
                  #dropdownRender="{ menuNode: menu }"
                >
                  <VNodes :vnodes="menu" />
                  <a-divider style="margin: 4px 0" />
                  <a-space style="padding: 4px 8px">
                    <a-input
                      ref="inputRef"
                      v-model:value="name"
                      placeholder="请输入属性值"
                      size="small"
                    />
                    <a-button
                      type="link"
                      @click="
                        (e: any) => {
                          e.preventDefault();
                          if (name.trim() === '') {
                            message.error('请输入属性值');
                            return;
                          }
                          const getFindDatas = item.options.find(
                            (i: any) => i.name === name.trim(),
                          );
                          if (getFindDatas) {
                            if (
                              item.optionsValue.length < item.multiSelectMax
                            ) {
                              !item.optionsValue.includes(getFindDatas.value) &&
                                item.optionsValue.push(getFindDatas.value);
                            } else {
                              message.error(`最多选择${item.multiSelectMax}项`);
                            }
                          } else {
                            item.options.push({
                              diyType: 1, // 自定义
                              value: name.trim(),
                              name: name.trim(),
                              valueId: 0,
                            });
                            if (
                              item.optionsValue.length < item.multiSelectMax
                            ) {
                              !item.optionsValue.includes(name.trim()) &&
                                item.optionsValue.push(name.trim());
                            } else {
                              message.error(`最多选择${item.multiSelectMax}项`);
                            }
                          }
                          // const getItemIs =
                          //   productSpecRule.requiredSpecDetails.find(
                          //     (iouter: any) => {
                          //       return iouter.sellPropertyName === name.trim();
                          //     },
                          //   );

                          // if (getItemIs) {
                          //   if (!getItemIs.disabled) {
                          //     item.sellPropertyName = name.trim();
                          //     name = '';
                          //   } else {
                          //     message.error('该规格名已存在');
                          //     return;
                          //   }
                          //   return;
                          // }
                          // productSpecRule.requiredSpecDetails.push({
                          //   sellPropertyName: name.trim(),
                          //   sellPropertyId: '',
                          //   disabled: false,
                          // });
                          // item.sellPropertyName = name.trim();
                          name = '';
                        }
                      "
                    >
                      <template #icon>
                        <CheckOutlined />
                      </template>
                    </a-button>
                  </a-space>
                </template>
              </a-select>
              <a-input
                v-if="item.type === 'text'"
                v-model:value="item.optionsValue"
                :allow-clear="!item.required"
                :placeholder="`请输入${item.propertyName}`"
              />
              <div v-if="item.type === 'measure'">
                <div
                  v-for="(measure, indexser) in item.measureTemplates"
                  :key="indexser"
                >
                  <template v-if="measure.valueModules.length === 1">
                    <a-input-group
                      v-for="(meacobte, iter) in measure.valueModules"
                      :key="iter"
                      :allow-clear="!item.required"
                      class="w-full"
                      compact
                    >
                      <a-input
                        v-if="meacobte.inputType === 'input'"
                        v-model:value="meacobte.value"
                        :placeholder="`请输入${item.propertyName}`"
                        style="width: 60%"
                        @change="
                          () => {
                            let mergeValue = '';
                            measure.valueModules.forEach((uters: any) => {
                              const getunitName = uters.units.find(
                                (unit: any) => unit.unitId === uters.unitId,
                              )?.unitName;
                              mergeValue += `${uters.value}${getunitName || ''}${uters.suffix}`;
                            });

                            item.optionsValue = mergeValue;
                          }
                        "
                      />

                      <a-select
                        v-model:value="meacobte.unitId"
                        :field-names="fieldNamesmeasure"
                        :options="meacobte.units"
                        style="width: 40%"
                        @change="
                          () => {
                            let mergeValue = '';
                            measure.valueModules.forEach((uters: any) => {
                              const getunitName = uters.units.find(
                                (unit: any) => unit.unitId === uters.unitId,
                              )?.unitName;
                              mergeValue += `${uters.value}${getunitName || ''}${uters.suffix}`;
                            });

                            item.optionsValue = mergeValue;
                          }
                        "
                      />
                    </a-input-group>
                  </template>
                  <template v-if="measure.valueModules.length > 1">
                    <a-popover :open="item.openStatus" trigger="click">
                      <template #content>
                        <a-space align="end" direction="vertical">
                          <a-space>
                            <template
                              v-for="meacobte in measure.valueModules"
                              :key="meacobte.moduleId"
                            >
                              <span v-if="meacobte.prefix">{{
                                meacobte.prefix
                              }}</span>
                              <a-input-group class="w-full" compact>
                                <a-input
                                  v-if="meacobte.inputType === 'input'"
                                  v-model:value="meacobte.value"
                                  :placeholder="`请输入${item.propertyName}`"
                                  :style="{
                                    width:
                                      meacobte.units &&
                                      meacobte.units.length > 0
                                        ? '60%'
                                        : '100%',
                                  }"
                                />
                                <a-select
                                  v-if="
                                    meacobte.units && meacobte.units.length > 0
                                  "
                                  v-model:value="meacobte.unitId"
                                  :field-names="fieldNamesmeasure"
                                  :options="meacobte.units"
                                  style="width: 40%"
                                />
                              </a-input-group>
                              <span v-if="meacobte.suffix">{{
                                meacobte.suffix
                              }}</span>
                            </template>
                          </a-space>
                          <a-space>
                            <a-button
                              @click="
                                () => {
                                  item.openStatus = false;
                                }
                              "
                            >
                              取消
                            </a-button>
                            <a-button
                              type="primary"
                              @click="
                                () => {
                                  let mergeValue = '';
                                  measure.valueModules.forEach((uters: any) => {
                                    const getunitName = uters.units.find(
                                      (unit: any) =>
                                        unit.unitId === uters.unitId,
                                    )?.unitName;
                                    mergeValue += `${uters.value}${getunitName || ''}${uters.suffix}`;
                                  });
                                  item.optionsValue = mergeValue;
                                  item.openStatus = false;
                                }
                              "
                            >
                              确认
                            </a-button>
                          </a-space>
                        </a-space>
                      </template>
                      <a-input
                        v-model:value="item.optionsValue"
                        placeholder="请输入"
                        @click="
                          () => {
                            qita.forEach((qitaqq: any) => {
                              if (qitaqq.type === 'measure') {
                                item.openStatus = false;
                              }
                            });
                            item.openStatus = true;
                          }
                        "
                      />
                    </a-popover>
                  </template>
                </div>
              </div>
              <a-range-picker
                v-if="item.type === 'date_time_range'"
                v-model:value="item.optionsValue"
                :format="
                  item.measureTemplates[0].valueModules[0].validateRule
                    .timeFormat
                "
                :placeholder="['开始时间', '结束时间']"
              />
            </a-form-item>
          </a-space>
        </a-space>
      </a-space>
    </a-form>
  </div>
  <AiTitle
    v-model="aiTitleBoxState"
    :image="selectImage"
    @ok="getSelectAiTitle"
  />
</template>

<style scoped lang="scss">
.scrollbar {
  height: 500px;
  overflow-y: auto;
}
</style>
